let Arr = [{
    id: 1,
    productName: "品如的衣柜",
    timer: new Date().toLocaleTimeString()
},
{
    id: 2,
    productName: "蔡徐坤的篮球",
    timer: new Date().toLocaleTimeString()
},
{
    id: 3,
    productName: "墨子的炮",
    timer: new Date().toLocaleTimeString()
}, {
    id: 4,
    productName: "品如的衣柜",
    timer: new Date().toLocaleTimeString()
},
{
    id: 5,
    productName: "蔡徐坤的篮球",
    timer: new Date().toLocaleTimeString()
},
{
    id: 6,
    productName: "墨子的炮",
    timer: new Date().toLocaleTimeString()
},

]
class TableBody {
    constructor() {
        this.arr1 = [
            {
                id: '编号',
                productName: '品牌',
                foundTime: '创立时间',
                operate: '删除',
            }

        ]
        this.Arr = Arr
        this.ul = this.$('ul')
        this.thead = this.$('thead')
        this.table = this.$('table')
        this.tbody = this.$('tbody')
        this.div = this.$('div')
        this.btn = this.$('btn')
        this.name = this.$('name')
        this.search = this.$('search')
        this.num = this.$('num')
        this.foundBody(this.Arr)
        this.add()
        this.keydown()
        // this.Search()
        this.head()
        this.searchDataByName(this.Arr);
    }
    //表头
    head() {

        for (let i = 0; i < this.arr1.length; i++) {
            let tr = document.createElement('tr')
            tr.style.background = "green"
            for (let k in this.arr1[i]) {
                var td = document.createElement('td')
                td.innerHTML = this.arr1[i][k]
                tr.appendChild(td)
            }
            this.thead.appendChild(tr)

        }

    }
    $ = id => document.getElementById(id)
    //动态建表
    foundBody(Arr) {
        tbody.innerText = '';
        for (let i = 0; i < Arr.length; i++) {
            let tr = document.createElement('tr')

            for (let k in Arr[i]) {
                let td = document.createElement('td')
                td.innerHTML = Arr[i][k]
                tr.appendChild(td)
            }
            let lasttd = document.createElement('td')
            let del = document.createElement('button')
            del.innerText = "删除"
            this.del.index = i
            lasttd.appendChild(del)
            tr.appendChild(lasttd)
            this.del(del, Arr[i].id)
            tbody.appendChild(tr)
        }
    }

    //搜索
    searchDataByName(data) {//形参
        this.search.oninput = () => {
            console.log(this.search.value);
            let sValue = this.search.value;//输入的内容
            let nameData = data.map(obj => {//映射处理需要检索的数据
                return {
                    productName: obj.productName
                }
            })
            console.log(nameData);
            let findIndex = []//用于保存索引
            for (let i = 0; i < nameData.length; i++) {
                if (nameData[i].productName.search(sValue) != -1) {
                    findIndex.push(i);
                } else {
                }
            }
            let searchData = []
            for (let i = 0; i < findIndex.length; i++) {
                let index = findIndex[i];
                searchData.push(data[index])
                console.log(searchData);
              
            }
            this.foundBody(searchData);
        }
    }
    //键盘
    keydown() {
        document.onkeydown = (e) => {
            if (e.code == "Enter") {
                this.click()
            }
        }
    }
    //正则检索添加新数组
    clickAdd = () => {
        console.log('检索区域头');
        let newArr = {
            id: this.num.value,
            productName: this.name.value,
            timer: new Date().toLocaleTimeString()
        }
        if (num.value.trim() === '' || this.name.value.trim() === '') {
            alert('您为输入内容')
            return
        }
        let reg1 = /[0-9]/
        let str = this.num.value
        if (reg1.test(str)) {
            this.Arr.push(newArr)
            this.num.value = ''
            this.name.value = ''
            this.foundBody(this.Arr)
            console.dir('检索区域尾部');
        } else {
            alert('编号为数字')
            return
        }
    }
//增加按钮
    add() {  
        this.btn.onclick = () => {
            this.clickAdd()
        }
    }
//创建提示信息
    prompt() {
        if (tbody.innerHTML == '') {
            let td = document.createElement('td')
            let tr = document.createElement('tr')
            console.log(tr);
            tr.style.textAlign = 'center'
            td.colSpan = '4'
            td.innerHTML = '没有数据'
            tr.appendChild(td)
            tbody.appendChild(tr)
        }
    }
//删除区
    del(del, id) {
        del.onclick = () => {
            let index = this.Arr.findIndex(item => {
                return item.id == id
            })
            console.log('按键时删除区域检测到的索引' + index);
            this.Arr.splice(index, 1)
            this.foundBody(this.Arr)
            this.prompt()
        }
    }

}
new TableBody(Arr)

// class Table {

//     data

//     constructor(data) {
//         this.data = data
//         this.renderData(this.data)
//     }

//     addOneData() {

//     }

//     deleteItem() {

//     }

//     searchDataByName() {

//     }

//     renderData(data) {

//     }


// }

// let data = [{}, {}, {}];

// new Table(data);


//...........................................................................




// class TableBody {
//     constructor() {
//         this.arr1 = [
//             {
//                 id: '编号',
//                 productName: '品牌',
//                 foundTime: '创立时间',
//                 operate: '删除',
//             }

//         ]

//         this.Arr = [{
//             id: 1,
//             productName: "品如的衣柜",
//             timer: new Date().toLocaleTimeString()
//         },
//         {
//             id: 2,
//             productName: "蔡徐坤的篮球",
//             timer: new Date().toLocaleTimeString()
//         },
//         {
//             id: 3,
//             productName: "墨子的炮",
//             timer: new Date().toLocaleTimeString()
//         },
//         ]
//         this.ul = this.$('ul')
//         this.thead = this.$('thead')
//         this.table = this.$('table')
//         this.tbody = this.$('tbody')
//         this.div = this.$('div')
//         this.btn = this.$('btn')
//         this.name = this.$('name')
//         this.search = this.$('search')
//         this.num = this.$('num')
//         this.foundBody(this.Arr)
//         this.add()
//         this.keydown()
//         this.Search()
//         this.head()
//         // this.searchDataByName(this.Arr);


//     }



//     head() {

//         for (let i = 0; i < this.arr1.length; i++) {
//             let tr = document.createElement('tr')
//             for (let k in this.arr1[i]) {
//                 var td = document.createElement('td')
//                 td.innerHTML = this.arr1[i][k]
//                 tr.appendChild(td)
//             }
//             this.thead.appendChild(tr)

//         }

//     }

//     $ = id => document.getElementById(id)
//     foundBody(Arr) {
//         tbody.innerText = ''

//         for (let i = 0; i < Arr.length; i++) {
//             let tr = document.createElement('tr')

//             for (let k in Arr[i]) {
//                 let td = document.createElement('td')
//                 td.innerHTML = Arr[i][k]
//                 tr.appendChild(td)
//             }
//             // let lasttd = document.createElement('td')
//             // let del = document.createElement('button')
//             // del.innerText = "删除"
//             // del.index = i
//             // lasttd.appendChild(del)
//             // tr.appendChild(lasttd)

//             // del.onclick = () => {
//             //     Arr.splice(del.index, 1)
//             //     this.foundBody(Arr)
//             //     this.prompt()
//             //     console.log(this.Arr);
//             //     console.log(123);
//             //     // this.foundBody(newData)
//             this.lasttd = document.createElement('td')
//             this. del = document.createElement('button')
//             this.del.innerText = "删除"
//             this.del.index = i
//             console.log(this.del.index);
//             this.lasttd.appendChild(this.del)
//             tr.appendChild(this.lasttd)

//             this.del.onclick = () => {
//                 Arr.splice(this.del.index, 1)
//                 this.foundBody(Arr)
//                 // this.searchDataByName();
//                 this.prompt()
//                 console.log(this.Arr);
//                 console.log(123);
//                 // this.foundBody(newData)


//             }

//             console.log('创建区域');
//             tbody.appendChild(tr)


//         }
//     }


//     //键盘事件
//     keydown() {
//         document.onkeydown = (e) => {
//             if (e.code == "Enter") {
//                 this.click()
//             }
//         }

//     }
//     //正则检索添加新数组
//     clickAdd = () => {
//         console.log('检索区域头');
//         let newArr = {
//             id: this.num.value,
//             productName: this.name.value,
//             timer: new Date().toLocaleTimeString()
//         }
//         if (num.value.trim() === '' || this.name.value.trim() === '') {
//             alert('您为输入内容')
//             return
//         }
//         let reg1 = /[0-9]/
//         let str = this.num.value
//         if (reg1.test(str)) {

//             this.Arr.push(newArr)
//             this.num.value = ''
//             this.name.value = ''
//             this.foundBody(this.Arr)
//             console.log('检索区域尾部');
//         } else {
//             alert('编号为数字')
//             return
//         }
//     }
//     //提示信息

//     // k(array) {
//     //     if (array.length == 0) {
//     //         this.td = document.createElement('td')
//     //         this.tr = document.createElement('tr')
//     //         this.tr.style.textAlign = 'center'
//     //         this.td.colSpan = '4'
//     //         this.td.innerText = '没有搜索的数据'
//     //         this.tr.appendChild(this.td)
//     //         this.tbody.appendChild(this.tr)

//     //     }
//     // }
//     // 提示信息

//     //搜索
//     Search = () => {
//         this.search.oninput = () => {

//             //searchData
//             let newData = []
//             // console.log(newData);
//             for (let i = 0; i < this.Arr.length; i++) {
//                 let name = this.Arr[i].productName
//                 let num1 = this.Arr[i].id + ''
//                 // console.log(num1);
//                 let searchAll = this.search.value
//                 // console.log(searchAll);
//                 let numAll = num1.indexOf(searchAll);
//                 let main = name.indexOf(searchAll);
//                 // console.log("=====" + main);
//                 if (main > -1 || numAll > -1) {
//                     newData.push(this.Arr[i])
//                     this.foundBody(newData);
//                     console.log(this.Arr);
//                 } else {
//                     this.foundBody(newData)
//                     // this.k(newData)

//                 }
//             }

//         }
//     }

//     add() {  //增加按钮
//         this.btn.onclick = () => {

//             // if (tbody.innerText === '') {

//             //     ul.removeChild(this.p)
//             // }
//             this.clickAdd()
//             console.log('====56565=='+this.del.index);
//         }
//     }

//     //搜索
//     searchDataByName(data) {//形参
//         this.search.oninput = () => {
//             let sValue = this.search.value;//输入的内容
//             let nameData = data.map(obj => {//映射处理需要检索的数据
//                 return {
//                     idnum: obj.id,
//                     productName: obj.productName
//                 }
//             })
//             console.log(nameData);

//             let findIndex = []//用于保存索引
//             for (let i = 0; i < nameData.length; i++) {
//                 if (nameData[i].productName.search(sValue) != -1) {
//                     findIndex.push(i);
//                     // console.log('检索到输入内容的索引' + findIndex);
//                     // console.log('删除按键的索引'+this.del.index);

//                 } else {
//                     console.log(this.Arr.length);
//                     console.log(this.Arr);
//                     // this.foundBody(findIndex)
//                     // this.prompt()
//                     // alert('没有检索到')
//                     // console.log(this.tbody);
//                     // console.log(1287);
//                 }
//             }
//             let searchData = []
//             for (let i = 0; i < findIndex.length; i++) {
//                 searchData.push(data[findIndex[i]])
//                 // console.log('======' + searchData);
//             }

//             this.foundBody(searchData);
//             // this.T()
//             // this.foundBody(findIndex);
//         }
//     }
//     prompt() {
//         if (tbody.innerHTML == '') {
//             let td = document.createElement('td')
//             let tr = document.createElement('tr')
//             console.log(tr);
//             tr.style.textAlign = 'center'
//             td.colSpan = '4'
//             td.innerHTML = '没有数据'
//             tr.appendChild(td)
//             // console.log(tr);
//             tbody.appendChild(tr)
//             // console.log(tbody.innerHTML);
//             // console.log(tr);
//             // console.log();
//             // console.log("清除区域");
//             // console.log(this.Arr.length);

//         }
//     }

// }


// new TableBody()



// // class Table {

// //     data

// //     constructor(data) {
// //         this.data = data
// //         this.renderData(this.data)
// //     }

// //     addOneData() {

// //     }

// //     deleteItem() {

// //     }

// //     searchDataByName() {

// //     }

// //     renderData(data) {

// //     }


// // }

// // let data = [{}, {}, {}];

// // new Table(data);


// //...........................................................................